<!-- <template>
	<view class="scene">
		12
		<canvas id="c1" type="2d" style="display: inline-block; width: 300px; height: 300px;"></canvas>
		<button @click="init" style="width: 300px; margin-top:10px;">init</button>
	</view>
</template>

<script>
	import lottie from '@/common/lottie-miniprogram.js'
	export default {
		name: "opening",
		data() {
			return {

			};
		},
		methods: {
			init() {
				console.log('init')
				if (this._inited) {
					return
				}
				console.log(2)
				uni.createSelectorQuery().selectAll('#c1').node(res => {
					console.log('res',res)
					const canvas = res[0].node
					const context = canvas.getContext('2d')

					canvas.width = 300
					canvas.height = 300

					lottie.setup(canvas)
					this.ani = lottie.loadAnimation({
						loop: true,
						autoplay: true,
						animationData: require('../json/catrim.js'),
						rendererSettings: {
							context,
						},
					})
					this._inited = true
				}).exec()
			},
		},
	}
</script>

<style lang="scss">
	.scene {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

	#c1 {
		margin: 0 auto;
		margin-top: 10%;
		display: block;
		z-index: 9999;
	}
</style> -->
<template>
	<view class="content">
		<view style="text-align: center;">
			<canvas id="c1" type="2d" style="display: inline-block; width: 300px; height: 300px;"></canvas>
			<button @click="init" style="width: 300px; margin-top:10px;">init</button>
			<button @click="play" style="width: 300px; margin-top:10px;">play</button>
			<button @click="pause" style="width: 300px; margin-top:10px;">pause</button>
		</view>
	</view>
</template>

<script>
	import lottie from '@/common/lottie-miniprogram.js'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			const that = this;
			setTimeout(() => {
				that.init();
			}, 5000);
		},
		methods: {
			init() {
				  const query = wx.createSelectorQuery();
				    console.log('createSelectorQuery',query);
				    query.select('#C1').fields({
				      dataset: true,
				      size: true,
				      scrollOffset: true
				    }, function(res) {
				      // res 是选择到的元素的信息对象
				       console.log('createSelectorQuery===',res);
				    }).exec();
					
				let node = uni.createSelectorQuery().selectAll('#c1').node()
				console.log('node===', node);
				uni.createSelectorQuery().selectAll('#c1').node(res => {
					console.log('res', res);
					const canvas = res[0].node
					const context = canvas.getContext('2d')

					canvas.width = 300
					canvas.height = 300

					lottie.setup(canvas)
					this.ani = lottie.loadAnimation({
						loop: true,
						autoplay: true,
						animationData: require('../json/catrim.js'),
						rendererSettings: {
							context,
						},
					})
				}).exec()
			},
			play() {
				this.ani.play()
			},
			pause() {
				this.ani.pause()
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>